<!--
 * @Author: ujjldn ujjldn0515@163.com
 * @Date: 2025-06-15 18:52:53
 * @LastEditors: ujjldn ujjldn0515@163.com
 * @LastEditTime: 2025-08-09 22:26:13
 * @FilePath: \g-table\test\test.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>g-dialog 测试实例</title>
<script src="../node_modules/vue/dist/vue.global.prod.js"></script>
<link rel="stylesheet" href="../node_modules/element-plus/dist/index.css">
<script src="../node_modules/element-plus/dist/index.full.min.js"></script>
<script src="../dist/gdialog.umd.js"></script>
<link rel="stylesheet" href="../dist/gdialog.css" />
</head>
<body>
<div id="app">
	<div>
		<el-input
			placeholder="请输入内容"
			v-model="inputText"
		/>
	</div>
 <div>
	<el-button
   :key="1"
    type="primary"
    @click="openTestDialog"
  >
  test对话框
</button>
<el-button
  :key="2"
    type="primary"
    @click="openTestDialogA"
  >
  特殊字符对话框
</button>
<el-button
  :key="3"
    type="primary"
    @click="openTestDialogB"
  >
  特殊字符抽屉
</button>
<el-button
  :key="4"
    type="primary"
    @click="openDeptSelectorH5"
  >
  部门选择框H5
</button>
<el-button
  :key="5"
    type="primary"
    @click="openUserSelectorH5"
  >
  用户选择框H5
</button>

<el-button
  :key="6"
    type="primary"
    @click="openDeptSelector"
  >
  部门选择框
</button>

<el-button
  :key="7"
    type="primary"
    @click="openRoleSelector"
  >
  角色选择框
</button>

<el-button
  :key="8"
    type="primary"
    @click="openUserSelector"
  >
  用户选择框
</button>

 </div> 
  
</div>

<script>
    const { createApp } = Vue;
    const { ElMessage } = ElementPlus;
	
	const depts = [
			{
			"id": 1,
			"name": "总公司",
			"children": [
				{
				"id": 2,
				"name": "技术部",
				"children": [
					{ "id": 3, "name": "前端组" },
					{ "id": 4, "name": "后端组" }
				]
				},
				{ "id": 5, "name": "人事部" },
				{ "id": 6, "name": "财务部" },
				{ "id": 7, "name": "设计部" },
				{ "id": 8, "name": "运维部" }
			]
			},
			{
			"id": 21,
			"name": "总公司2",
			"children": [
				{
				"id": 22,
				"name": "技术部2",
				"children": [
					{ "id": 23, "name": "前端组2" },
					{ "id": 24, "name": "后端组2" }
				]
				},
				{ "id": 25, "name": "人事部2" },
				{ "id": 26, "name": "财务部2" },
				{ "id": 27, "name": "设计部2" },
				{ "id": 28, "name": "运维部2" }
			]
			}
		]
	const roles = [
		{
			"id": 100,
			"name": "管理角色",
			"children": [
			{ "id": 101, "name": "开发角色" },
			{ "id": 102, "name": "测试角色" },
			{ "id": 103, "name": "产品角色" }
			]
		},
		{
			"id": 104,
			"name": "职能角色",
			"children": [
			{ "id": 105, "name": "人事角色" },
			{ "id": 106, "name": "财务角色" },
			{ "id": 107, "name": "设计角色" },
			{ "id": 108, "name": "运维角色" }
			]
		}
	]
	const users = [
		{ "id": 1, "name": "张三", "position": "前端工程师", "departmentName": "前端组", "departmentId": 3, "roleId": 101 },
		{ "id": 2, "name": "李四", "position": "后端工程师", "departmentName": "后端组", "departmentId": 4, "roleId": 102 },
		{ "id": 3, "name": "王五", "position": "产品经理", "departmentName": "技术部", "departmentId": 2, "roleId": 103 },
		{ "id": 4, "name": "赵六", "position": "人事专员", "departmentName": "人事部", "departmentId": 5, "roleId": 104 },
		{ "id": 5, "name": "钱七", "position": "财务经理", "departmentName": "财务部", "departmentId": 6, "roleId": 105 },
		{ "id": 6, "name": "孙八", "position": "前端工程师", "departmentName": "前端组", "departmentId": 3, "roleId": 101 },
		{ "id": 7, "name": "周九", "position": "后端工程师", "departmentName": "后端组", "departmentId": 4, "roleId": 102 },
		{ "id": 8, "name": "吴十", "position": "测试工程师", "departmentName": "技术部", "departmentId": 2, "roleId": 106 },
		{ "id": 9, "name": "郑一", "position": "UI设计师", "departmentName": "设计部", "departmentId": 7, "roleId": 107 },
		{ "id": 10, "name": "王二", "position": "运维工程师", "departmentName": "运维部", "departmentId": 8, "roleId": 108 }
	]
    
    const app = createApp({
      data() {
        return {
            inputText:'',
        };
      },
      methods: {
        onCharacterSelected(char){
            ElMessage.success(`你选择了${char}`)
        },
        openTestDialog(){     
            //console.log('openTestDialog called');               
            window.GDialog.openDialog({dialogName: 'GSelectDialog',selected:this.inputText}) //test
        },
        openTestDialogA(){    
		  //console.log('openTestDialogA called');            
		  window.GDialog.openDialog({
			dialogName: 'CharacterDialog',
			selected: this.inputText,
			onConfirm: (selectedChars) => {
			  console.log('收到的字符:', selectedChars)
			  // 这里你可以将选中的字符插入到 input 中
			  if (selectedChars) {
				this.inputText = selectedChars
			  }
			}
		  })
		},
        openTestDialogB(){     
           // console.log('openTestDialogB called');                
            window.GDialog.openDialog({dialogName: 'CharacterDrawer',selected:this.inputText})
        },
		openDeptSelectorH5(){
			window.GDialog.openDialog({
			dialogName: 'DeptSelectorH5',
			visible:true,
			selected:[3],
			departments: depts,
			onConfirm: (result) => {
			  console.log('收到:', result)		  
			}
		  })
		},
		openDeptSelector(){
			window.GDialog.openDialog({
			dialogName: 'DeptSelector',
			visible:true,
			treeData: depts,
			selected:[3,6],
			onConfirm: (result) => {
			  console.log('收到:', result)		  
			}
		  })
		},
		openRoleSelector(){
			window.GDialog.openDialog({
			dialogName: 'RoleSelector',
			visible:true,
			selected:[101,105],
			treeData: roles,
			onConfirm: (result) => {
			  console.log('收到:', result)		  
			}
		  })
		},
		openUserSelectorH5(){
			window.GDialog.openDialog({
			dialogName: 'UserSelectorH5',
			visible:true,
			departments: depts,
			users: users,
			userDeptIdKey:'departmentId',
			selected:[1,5],
			onConfirm: (result) => {
			  console.log('收到:', result)		  
			}
		  })
		},
		openUserSelector(){
			window.GDialog.openDialog({
			dialogName: 'UserSelector',
			visible:true,
			deptTreeData: depts,
			userListData: users,
			roleTreeData: roles,
			selected:[1,5],
			onConfirm: (result) => {
			  console.log('收到:', result)		  
			}
		  })
		},
        
      }
    });

    // 确保两个组件都存在再注册
    app.use(ElementPlus);
    app.mount('#app');
</script>
</body>
</html>